<!--  -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      bgcolor="rgb(55, 81, 255) !important"
      bgImage="linear-gradient(rgb(55, 81, 255) 0%, rgb(76, 99, 255) 50%, rgb(91 112 255) 75%, rgb(107 127 255) 100%) !important"
      >课程详情</navbar
    >
    <div style="height: 0.45rem"></div>
    <div class="content">
      <div class="head">
        <van-image
          width="100%"
          height="1.7rem"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
        <p class="titles">
          1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
        </p>
      </div>
      <div class="center">
        <div class="teacher">
          <p class="title">老师介绍</p>
          <div class="p-box">
            <ul class="box">
              <li class="child">
                <van-image
                  width="0.8rem"
                  height="0.8rem"
                  round
                  src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
                <div class="text">
                  <p>郑老师</p>
                  <p>
                    分支在实际中有什么用呢？假设你准备开发一个新功能，但是需要两周才能完成，第一周你写了50%的代码，如果立刻提交，由于代码还没写完，不完整的代码库会导致别人不能干活了。
                  </p>
                </div>
              </li>
              <li class="child">
                <van-image
                  width="0.8rem"
                  height="0.8rem"
                  round
                  src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
                <div class="text">
                  <p>郑老师</p>
                  <p>
                    分支在实际中有什么用呢？假设你准备开发一个新功能，但是需要两周才能完成，第一周你写了50%的代码，如果立刻提交，由于代码还没写完，不完整的代码库会导致别人不能干活了。
                  </p>
                </div>
              </li>
              <li class="child">
                <van-image
                  width="0.8rem"
                  height="0.8rem"
                  round
                  src="https://img.yzcdn.cn/vant/cat.jpeg"
                />
                <div class="text">
                  <p>郑老师</p>
                  <p>
                    分支在实际中有什么用呢？假设你准备开发一个新功能，但是需要两周才能完成，第一周你写了50%的代码，如果立刻提交，由于代码还没写完，不完整的代码库会导致别人不能干活了。
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="class">
          <p class="text">课程介绍</p>
          <p class="detail">
            分支在实际中有什么用呢？假设你准备开发一个新功能，但是需要两周才能完成，第一周你写了50%的代码，如果立刻提交，由于代码还没写完，不完整的代码库会导致别人不能干活了。如果等代码全部写完再一次提交，又存在丢失每天进度的巨大风险。
            现在有了分支，就不用怕了。你创建了一个属于你自己的分支，别人看不到，还继续在原来的分支上正常工作，而你在自己的分支上干活，想提交就提交，直到开发完毕后，再一次性合并到原来的分支上，这样，既安全，又不影响别人工作。
            其他版本控制系统如SVN等都有分支管理，但是用过之后你会发现，这些版本控制系统创建和切换分支比蜗牛还慢，简直让人无法忍受，结果分支功能成了摆设，大家都不去用。
            但Git的分支是与众不同的，无论创建、切换和删除分支，Git在1秒钟之内就能完成！无论你的版本库是1个文件还是1万个文件
          </p>
          <van-image
            width="100%"
            height="2rem"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
          <van-image
            width="100%"
            height="2rem"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
          <van-image
            width="100%"
            height="2rem"
            src="https://img.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
      </div>
    </div>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" />
      <van-goods-action-button
        type="danger"
        text="立即报名"
        color="linear-gradient(to right, #32d628, #16ce00)"
        @click="onClickButton"
      /> </van-goods-action
    ><van-popup
      v-model="kfshow"
      closeable
      position="bottom"
      :style="{ height: '50%' }"
    >
      <div class="kefuc">
         <van-image
          width="2rem"
          height="2rem"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
        <p>添加客服微信咨询课程
        </p>
      </div>
    </van-popup>
  </div>
</template>

<script>
import navbar from "@/components/navbar";
import {
  Toast,
  Dialog,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
} from "vant";
export default {
  name: "classDetail",
  data() {
    return {
      kfshow: false,
    };
  },

  components: { navbar },

  computed: {},

  created() {},
  mounted() {},

  methods: {
    // 返回上一页
    goBack() {
      this.$router.replace({ path: "/Training" });
    },
    onClickIcon() {
      this.kfshow = true;
    },
    onClickButton() {
      Toast("点击按钮");
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  & .content {
    width: 100%;
    padding-bottom: 0.5rem;
    & .head {
      margin-bottom: 0.1rem;
      & .titles {
        width: 95%;
        text-align: left;
        color: black;
        font-size: 0.2rem;
        margin: auto;
        margin-top: 0.1rem;
        word-break: break-all;
        line-height: 0.25rem;
      }
    }
    & .center {
      & .teacher {
        border-top: 1px solid #e2e2e2;
        border-bottom: 1px solid #e2e2e2;
        margin-bottom: 0.1rem;
        padding: 0.1rem 0;
        & .title {
          text-align: left;
          font-size: 0.2rem;
          margin-left: 0.1rem;
          color: #3a21ff;
        }
        & .p-box {
          position: relative;
          overflow: hidden;
          overflow-x: scroll;
          height: 1.6rem;
          & .box {
            margin: 0.1rem 0;
            padding-right: 0.1rem;
            float: left;
            list-style: none;
            display: inline-flex;
            // white-space: nowrap;
            & .child {
              float: left;
              margin-left: 0.1rem;
              background: #fff;
              border-radius: 0.1rem;
              padding: 0.1rem;
              display: inline-flex;
              width: 2.7rem;
              & .text {
                margin-left: 0.1rem;
                width: 65%;
                & p:nth-of-type(1) {
                  font-size: 0.14rem;
                  text-align: left;
                }
                & p:nth-of-type(2) {
                  margin-top: 0.05rem;
                  font-size: 0.12rem;
                  line-height: 0.16rem;
                  text-align: left;
                }
              }
            }
          }
        }
      }
      & .class {
        width: 95%;
        margin: auto;
        & .text {
          text-align: left;
          font-size: 0.2rem;
          color: #3a21ff;
        }
        & .detail {
          margin: 0.05rem 0;
          text-align: left;
          font-size: 0.16rem;
          line-height: 0.25rem;
        }
      }
    }
  }
  & .kefuc {
    margin-top: 0.4rem;
    & p{
      font-size: 0.18rem;
      color: red;
      margin-top: 0.1rem;
    }
  }
}

.p-box::-webkit-scrollbar {
  display: none;
}
</style>